<template>
  <section class="body-wrapper">
    <div class="blog-wrapper">
      <blog-list></blog-list>
      <blog-content :data="contentData"></blog-content>
      <blog-aside :user-list="userList"></blog-aside>
    </div>
  </section>
</template>

<script lang="ts">
import Vue from 'vue'
import axios from '@/assets/axios'

export default Vue.extend({
  async asyncData() {
    const contentData = () => { return axios.get('http://106.12.122.161:3001/user/alldata/getallskilldata?type=js&limit=20&skip=0') }
    const userList = () => { return axios.get('http://106.12.122.161:3001/user/alldata/getalluserdata?limit=5&skip=0') }

    return await axios.all([contentData(), userList()]).then((res) => {
      return {
        contentData: res[0].data.data,
        userList: res[1].data.data
      }
    })

    // return {
    //   contentData,
    //   userList
    // }
  },
  data() {
    return {
      contentData: [],
      userList: []
    }
  }
})
</script>

<style scoped lang="scss">
.body-wrapper {
  width: 100%;
  height: 100%;
  .blog-wrapper {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    padding: 10px 0;
  }
}
</style>
